<template>
    <!-- 主框架 -->
    <div class="consumer">
        <!-- 内容框架 -->
        <div class="content">
            <!-- 左侧 -->
            <div class="content-left">
                <!-- 搜索框 -->
                <div class="consumer-search-bg">
                    <p>溯源码搜索</p>
                    <el-divider />
                    <p>请输入您想要查询的溯源码</p>
                    <!-- 输入框 -->
                    <el-input v-model="inputCode" type="number" resize="none" class="inputCode"
                        :autosize="{ minRows: 7, maxRows: 7 }" />
                    <!-- 按钮 -->
                    <div>
                        <el-button type="danger" @click="LoginOut">退出登录</el-button>
                        <el-button type="info" @click="resetQuary">重置</el-button>
                        <el-button type="success" @click="userQuary(inputCode)">查询</el-button>
                    </div>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="content-right">
                <!-- 信息展示 -->
                <div class="content-mess" v-if="messFlag">
                    <div class="dialog-message-bg">
                        <div class="dialog-message-p">
                            <p>以下是溯源码为{{ inputCode }}的溯源信息</p>
                            <p>食品基本信息</p>
                        </div>
                        <div v-for="(item, index) in foodMess" :key="index" class="dialog-message-table">
                            <div>
                                <div>{{ index }}</div>
                            </div>
                            <div>
                                <div>{{ item }}</div>
                            </div>
                        </div>
                    </div>
                    <!-- 分割线 -->
                    <el-divider />
                    <!-- 步骤条,信息2 -->
                    <el-timeline>
                        <p>食品流通信息</p>
                        <el-timeline-item v-for="(value, key) in circulateMess" :key="key">
                            <div class="circulateMess">
                                <div>{{ key }}</div>
                                <div>{{ value }}</div>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item v-for="(value, key) in supermarketMess" :key="key">
                            <div class="circulateMess">
                                <div>{{ key }}</div>
                                <div>{{ value }}</div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
                <!-- 空信息 -->
                <div class="content-null" v-else>请在左侧查询栏中输入溯源码进行查询
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='js' name=''>
import { ref } from 'vue'
import { LoginOut } from '@/hooks/useLoginOut';
import { CheckInput } from '@/hooks/userCheckInput';
import getTraceAPI from '@/API/main/trace';
import showMessage from '@/utils/showMessage';
import strToTime from '@/utils/strToTime';
import getTokenNotAPI from '@/API/tokenNot';

// 溯源码
const inputCode = ref()
// 展示信息flag
const messFlag = ref(false)

// 基本信息框架
const foodMess = ref({
    "溯源码": "正在加载中......",
    "食品名称": "正在加载中......",
    "生产商": "正在加载中......",
    "生产时间": "正在加载中......",
    "生产商地址": "正在加载中......",
})
// 流通信息框架
const circulateMess = ref({
    "中间商地址": "正在加载中......",
    "入库时间": "正在加载中......",
    "质检情况": "正在加载中......",
    "发货单位": "正在加载中......",
    "收货单位": "正在加载中......"
})
const supermarketMess = ref({
    "超市地址": "正在加载中......",
    "入库时间": "正在加载中......",
    "质检情况": "正在加载中......",
    "发货单位": "正在加载中......",
    "收货单位": "正在加载中......"
})
// 重置查询
function resetQuary(){
    messFlag.value = false
    changeMore(foodMess.value, "正在加载中......")
    changeMore(circulateMess.value, "正在加载中......")
    changeMore(supermarketMess.value, "正在加载中......")
}
// 查询按钮
function userQuary(value) {
    if (CheckInput(value, "请输入您想要查询的溯源码")) {
        messFlag.value = true
        async function getTrace(value) {
            const res = await getTraceAPI(value)
            if (res.status == 200) {
                if (res.data[0]) {
                    foodMess.value.生产商地址 = res.data[0].from_address
                    foodMess.value.溯源码 = res.data[0].traceNumber
                    foodMess.value.食品名称 = res.data[0].name
                    foodMess.value.生产商 = res.data[0].from
                    foodMess.value.生产时间 = strToTime(res.data[0].timestamp)
                } else {
                    changeMore(foodMess.value, "查询失败,请检查网络问题")
                }
                if (res.data[1]) {
                    circulateMess.value.中间商地址 = res.data[1].to_address
                    circulateMess.value.入库时间 = strToTime(res.data[1].timestamp)
                    circulateMess.value.质检情况 = res.data[1].quality == 1 ? "优质" : res.data[1].quality  == 2 ? "合格" : "不合格"
                    circulateMess.value.发货单位 = res.data[1].from
                    circulateMess.value.收货单位 = res.data[1].to
                } else {
                    changeMore(circulateMess.value, "该食品未经中间商记录")
                }
                if (res.data[2]) {
                    supermarketMess.value.超市地址 = res.data[2].to_address
                    supermarketMess.value.入库时间 = strToTime(res.data[2].timestamp)
                    supermarketMess.value.质检情况 = res.data[2].quality == 1 ? "优质" : res.data[2].quality  == 2 ? "合格" : "不合格"
                    supermarketMess.value.发货单位 = res.data[2].from
                    supermarketMess.value.收货单位 = res.data[2].to
                } else {
                    changeMore(supermarketMess.value, "该食品未经超市记录")
                }
            } else {
                showMessage("查询失败,请检查输入内容")
            }
        }
        getTrace(value)
    }
}

function changeMore(value, mess) {
    for (const key in value) {
        value[key] = mess
    }
}

async function isLogin(){
    const res = await getTokenNotAPI()
}
isLogin()
</script>

<style scoped>
/* 主框架 */
.consumer {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

/* 内容框架 */
.content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 70%;
    gap: 10px;
    align-items: center;
}

/* -----左侧----- */
.content-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 左框架 */
.consumer-search-bg {
    padding: 20px;
    width: 70%;
    height: 50%;
    border: 1px solid #acacac;
    border-top: 5px solid green;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 文字1 */
.consumer-search-bg>*:nth-child(1) {
    font-size: 25px;
    font-weight: bold;
    transition: all 0.5s;
    color: var(--Main_TextColor1);
}

/* 文字2 */
.consumer-search-bg>*:nth-child(3) {
    font-size: 15px;
    color: #7c7c7c;
    padding-bottom: 10px;
}

/* 输入框 */
.consumer-search-bg>*:nth-child(4) {
    flex: 1;
    height: 100px;
}

/* 按钮框架 */
.consumer-search-bg>*:nth-child(5) {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* 按钮 */
.consumer-search-bg>*:nth-child(5)>* {
    height: 40px;
    margin-bottom: -10px;
}

.consumer-search-bg>*:nth-child(5)>*:nth-child(1) {
    width: 20%;
}

.consumer-search-bg>*:nth-child(5)>*:nth-child(2) {
    width: 30%;
}
.consumer-search-bg>*:nth-child(5)>*:nth-child(3) {
    width: 50%;
}

/* -----右侧----- */
/* 右框架 */
.content-right {
    width: calc(100% - 50px);
    height: 80%;
    padding: 20px;
    background: var(--Main_tableBG);
    transition: all 0.5s;
    border: 1px solid #505050;
    overflow-y: scroll;
}

/* 信息框架 */
.content-mess {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 空信息框架 */
.content-null {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    color: var(--Main_TextColor1);
}

/* 主标题 */
.dialog-message-p>p:nth-child(1) {
    color: green;
    font-size: 20px;
    font-weight: bold;
}

/* 副标题 */
.dialog-message-p>p:nth-child(2),
.el-timeline>p {
    color: black;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin: 10px;
    color: var(--Main_TextColor1);
    transition: all 0.5s;
}

/* 信息展示框 */
.dialog-message-bg {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.dialog-message-p>p:nth-child(1) {
    color: green;
    font-size: 20px;
    font-weight: bold;

}

.dialog-message-p>p:nth-child(2),
.message2 {
    color: black;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin: 10px;
    color: var(--Main_TextColor1);
    transition: all 0.5s;
}

.dialog-message-table {
    width: 80%;
    margin-left: 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.dialog-message-table>div {
    color: var(--Main_TextColor1);
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dialog-message-table>div>div {
    word-break: break-word;
    text-align: center;
    margin: 5px;
}

/* 信息展示框2 */
.el-timeline {
    width: 60%;
    margin: 0 20%;
}

.circulateMess {
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    word-break: break-word;
    color: var(--Main_TextColor1);
    transition: all 0.5s;
}

.circulateMess>div:last-child {
    text-align: center;
}
</style>